<template>
  <view class="container">
    <!-- Tab栏 -->
    <view class="tab-bar">
      <view 
        v-for="(tab, index) in tabs" 
        :key="index"
        class="tab-item"
        :class="{ active: activeTab === index }"
        @click="switchTab(index)"
      >
        <text>{{ tab.title }}</text>
      </view>
    </view>

    <!-- 内容区域 -->
    <view class="content">
      <!-- 个人信息 -->
      <view class="tab-content">
        <view class="user-section">
          <view class="avatar-container">
            <uni-icons class="avatar-placeholder" type="person" v-if="!isLoggedIn"></uni-icons>
            <image v-else :src="avatarUrl" mode="aspectFill"></image>
          </view>
          <text class="username">{{ username || '未登录' }}</text>
        </view>
        
        <view class="menu-list">
          <view class="menu-item" @click=handleInfo>
            <text>我的信息</text>
            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
          </view>
          <view class="menu-item" >
            <text>关于我们</text>
            <uni-icons type="arrowright" size="16" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 登录/退出按钮 -->
    <view class="container">
    <WXLogin @loginSuccess="handleLoginSuccess" />
    
    <!-- #ifdef H5 -->
    <button class="login-btn" @click="handleLogin">
      登录
    </button>
    <!-- #endif -->
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { useUserStore } from '@/stores/userdata';
import WXLogin from '@/components/WXLogin.vue'

const userStore = useUserStore();

const handleLogin = () => {
  if (!userStore.isLoggedIn) {
    uni.navigateTo({
      url: '/views/my/login'
    });
  }
}

const handleInfo = () => {
    uni.navigateTo({
      url: '/views/myInfor/index'
    });
}

const handleLoginSuccess = () => {
  setTimeout(() => {
    uni.switchTab({ url: '/views/index/index' })
  }, 1500)
}
</script>

<style scoped>
/* 原有样式保持不变 */
.container {
  padding: 0;
  background: 
     linear-gradient(135deg, #0a0e17 0%, #1a1f2e 100%),
    repeating-linear-gradient(
      45deg,
      rgba(56, 182, 255, 0.03) 0px,
      rgba(56, 182, 255, 0.03) 2px,
      transparent 2px,
      transparent 4px
    );
  min-height: 100vh;
  color: #333;
}

.tab-bar {
  display: flex;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(5px);
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 30rpx;
  color: #666;
  transition: all 0.3s ease;
}

.tab-item.active {
  color: #38b6ff;
  border-bottom: 4rpx solid #38b6ff;
  font-weight: 600;
}

.content {
  padding: 24rpx;
}

.tab-content {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 16rpx;
  padding: 0;
  backdrop-filter: blur(5px);
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  overflow: hidden;
}

.user-section {
  padding: 60rpx 20rpx 40rpx;
  text-align: center;
  background: rgba(56, 182, 255, 0.1);
  position: relative;
}

.avatar-container {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin: 0 auto 20rpx;
  background: rgba(56, 182, 255, 0.1);
  border: 2px solid rgba(56, 182, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(56, 182, 255, 0.2);
}

.avatar-placeholder {
  font-size: 50rpx;
  color: #053551
}

.username {
  font-size: 36rpx;
  font-weight: bold;
  color: #0b405e;
  margin-top: 20rpx;
  display: block;
}

.menu-list {
  margin-top: 0;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 16rpx;
  overflow: hidden;
  margin: 20rpx;
  border: 1px solid rgba(56, 182, 255, 0.1);
  backdrop-filter: blur(5px);
}

.menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28rpx 32rpx;
  border-bottom: 1px solid rgba(56, 182, 255, 0.1);
  transition: all 0.2s ease;
  color: #333;
}

.menu-item:active {
  background: rgba(56, 182, 255, 0.1);
}

.login-btn, .logout-btn {
  margin: 40rpx 30rpx 0;
  color: white;
  border: none;
  border-radius: 40rpx;
  padding: 24rpx 0;
  font-size: 32rpx;
  box-shadow: 0 0 10px rgba(56, 182, 255, 0.2);
  transition: all 0.3s ease;
}

.login-btn {
  background-color: #0b405e;
}

.logout-btn {
  background: linear-gradient(to right, #ff3860, #ff8a00);
}

.login-btn:active, .logout-btn:active {
  transform: scale(0.96);
  box-shadow: 0 0 5px rgba(56, 182, 255, 0.3);
}
</style>
